<!-- login.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <script src="static/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        h2 {
            text-align: center;
            color: #4CAF50;
            margin-bottom: 20px;
        }
        form {
            background-color: #fff;
            padding: 40px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px 0px #000000;
            width: 300px;
            text-align: left;
        }
        input[type="text"], input[type="password"], input[type="submit"] {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
        a {
            text-decoration: none;
            color: #4CAF50;
			 text-decoration: none;
			 color: aqua;
			 padding: 1px 2px;
			 border: 1px solid #4CAF50;
			 border-radius: 1px;
			 transition: background-color 0.3s ease;
			 margin: 0 10px;
			border-radius: 5px;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <center>
    <h2>登录用户</h2>
    <form id="loginForm">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password">
        </div>
        <div>
        <input type="submit" value="登录">
        </div>
    </form>
    </center>
    <center>
    <p>还没有账号？<a href="/register">点击这里注册</a></p>
    <p>想修改密码吗？<a href="/change_password">点击这里修改密码</a></p>
    </center>

<script>
    $(document).ready(function(){
        $('#loginForm').submit(function(event){
            event.preventDefault();
            var username = $('#username').val();
            var password = $('#password').val();

            $.ajax({
                type: 'POST',
                url: '/login',
                contentType: 'application/json',
                data: JSON.stringify({username:username, password:password}),
                success: function(response){
                    alert(response.message);
                    if('登录成功' === response.message){
                        window.location.href= '/stu';
                    }
                },
                error: function(){
                    alert('登录失败');
                }
            });
        });
    });
</script>
</body>
</html>
